<template>
  <div>

    <!--  左侧-->
    <el-row align="top">
      <el-col :span="8" style="padding-top: 20px;padding-left:20px ">
        <el-card class="update-log" style="padding-left: 20px;padding-top: 10px">
          <el-form :inline="true" :model="patientData" class="demo-form-inline">
            <el-form-item label="身份证号" prop="card">
              <el-input v-model="patientData.patientCard" placeholder="患者身份证号码" disabled>

                <el-button slot="append" icon="el-icon-user-solid" @click.native="opendialog"></el-button>

              </el-input>

            </el-form-item>
            <el-form-item label="患者姓名" prop="name">
              <el-input v-model="patientData.patientName" placeholder="患者姓名" disabled></el-input>
            </el-form-item>

            <el-form-item label="患者电话" prop="phone">
              <el-input v-model="patientData.patientPhone" placeholder="患者电话" value="postList.phone"
                        disabled></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="patientData.patientSex" disabled>
                <el-radio label="0" v-model="patientData.patientSex">男</el-radio>
                <el-radio label="1" v-model="patientData.patientSex">女</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="出生日期">
              <el-date-picker
                v-model="patientData.patientBirth"
                type="date"
                placeholder="选择日期"
                style="width: 207px" disabled="">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="患者年龄">
              <el-input v-model="patientData.patientAge" placeholder="患者年龄" disabled></el-input>
            </el-form-item>

            <el-form-item label="地址信息">
              <el-input
                type="textarea"
                placeholder="请输入地址信息"
                v-model="patientData.patientAddress"
                maxlength="30"
                show-word-limit
                style="width: 207px"
                disabled
              ></el-input>
            </el-form-item>


            <el-form-item label="过敏历史">
              <el-input
                type="textarea"
                placeholder="请输入过敏史"
                v-model="patientData.patientHistory"
                maxlength="30"
                show-word-limit
                style="width: 207px"
                disabled
              ></el-input>
            </el-form-item>

          </el-form>


          <el-tabs v-model="seePatient2" type="card" @tab-click="handleClick" stretch="stretch">
            <el-tab-pane label="患者档案" name="患者档案" class="el-tab" style="text-align: center">暂无患者档案</el-tab-pane>
            <el-tab-pane label="历史病例" name="历史病例" style="text-align: center">历史病例</el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>


      <!--    右侧-->
      <el-col :span="15" style="padding-top: 20px;padding-left:20px ">
        <el-card class="update-log" style="height: 70px">


        <span>
          <b>挂号单ID:</b><span style="color: red">{{ registerid === '' ? "选择患者后显示" : registerid }}</span>
          <b>病例编号:</b><span style="color: blueviolet;font-family: 微软雅黑">{{this.caseid }}</span>
        </span>


          <div id="butDiv">
            <el-button type="primary" @click="saveCase" icon="el-icon-download">保存病例</el-button>
            <el-button type="danger" icon="el-icon-check" @click="succeed">就诊完成</el-button>
          </div>

        </el-card>
      </el-col>


      <!--    病例-->
      <el-col :span="15" style="padding-top: 20px;padding-left:20px ">
        <el-card class="update-log">
          <el-tabs v-model="seePatient3" type="card" @tab-click="handleClick">
            <el-tab-pane label="病例" name="病例" class="el-tab">

              <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">

                <el-form-item label="发病日期" prop="date">
                  <el-date-picker
                    v-model="form.historyDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 170px"
                    placeholder="选择日期"
                    clearable></el-date-picker>
                </el-form-item>


                <el-form-item label="接诊类型">
                  <el-select v-model="form.historyType" placeholder="类型选择" clearable style="width: 170px">
                    <el-option label="初诊" value="0"></el-option>
                    <el-option label="复诊" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="是否传染">
                  <el-select v-model="form.historyContagion" placeholder="请选择" clearable style="width: 170px">
                    <el-option label="传染" value="1"></el-option>
                    <el-option label="不传染" value="0"></el-option>

                  </el-select>
                </el-form-item>
              </el-form>


              <el-form :label-position="labelPosition" label-width="80px" v-model="form">

                <el-form-item label="主诉">
                  <el-input
                    type="textarea"
                    placeholder="请输入主诉"
                    v-model="form.historyDiscribe"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>


                <el-form-item label="诊断信息">
                  <el-input
                    type="textarea"
                    placeholder="请输入诊断信息"
                    v-model="form.historyDiagnosis"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>

                <el-form-item label="医生建议">
                  <el-input
                    type="textarea"
                    placeholder="请输入医生信息"
                    v-model="form.historyProposal"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>

                <el-form-item label="备注">
                  <el-input
                    type="textarea"
                    placeholder="请输入备注信息"
                    v-model="form.historyRemark"
                    maxlength="30"
                    show-word-limit
                  ></el-input>
                </el-form-item>

              </el-form>

              <!--            处方-->
            </el-tab-pane>
            <el-tab-pane label="处方" name="处方">

              <el-button type="success" icon="el-icon-plus" @click="openMecinePrecribe">添加药用处方</el-button>

              <el-button type="success" icon="el-icon-plus" @click="openPrescribe">添加检查处方</el-button>

            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

    </el-row>

    <!--  选择挂号患者-->
    <el-dialog title="选择挂号患者" :visible.sync="dialog">
      <el-tabs v-model="seePatient1" type="card" stretch="stretch">
        <el-tab-pane label="待就诊列表" name="待就诊列表">
          <el-table
            :data="PatientData"
            border
            style="width: 100%">
            <el-table-column
              prop="patientName"
              label="患者姓名"
            >
            </el-table-column>
            <el-table-column
              prop="patientNum"
              label="流水编号"
            >
            </el-table-column>
            <el-table-column
              prop="regis.registerName"
              label="挂号类型">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-check" @click="putPatient(scope.row.patientId)">接诊</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="就诊中列表" name="就诊中列表">

          <el-table
            :data="PatientData2"
            border
            style="width: 100%">
            <el-table-column
              prop="patient_name"
              label="患者姓名"
            >
            </el-table-column>
            <el-table-column
              prop="register_id"
              label="流水编号"
            >
            </el-table-column>
            <el-table-column
              prop="registra_name"
              label="挂号类型">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-check" @click="putPatient(scope.row.register_id)">接诊</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>


        <el-tab-pane label="就诊完成列表" name="就诊完成列表">

          <el-table
            :data="PatientData3"
            border
            style="width: 100%">
            <el-table-column
              prop="patient_name"
              label="患者姓名"
            >
            </el-table-column>
            <el-table-column
              prop="register_id"
              label="流水编号"
            >
            </el-table-column>
            <el-table-column
              prop="registra_name"
              label="挂号类型">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-check" @click="putPatient(scope.row.register_id)">接诊</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!--  历史病例展示-->
    <el-dialog title="病例展示" :visible.sync="historyill">
      <div slot="title">
        <h1 align="center" style="color: indigo">{{ patientName }}</h1>
      </div>
      <el-table v-loading="loading" :data="historyList">
        <el-table-column label="发病日期" align="center" prop="history_date"/>
        <el-table-column label="接诊类型" align="center" prop="history_type">
          <template slot-scope="scope">
            <span>{{ scope.row.history_type === 0 ? "初诊" : "复诊" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否传染" align="center" prop="history_contagion">
          <template slot-scope="scope">
            <span>{{ scope.row.history_contagion === 0 ? "不传染" : "传染" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="主诉" align="center" prop="history_discribe"/>
        <el-table-column label="诊断信息" align="center" prop="history_diagnosis"/>
        <el-table-column label="医生建议" align="center" prop="history_proposal"/>
        <el-table-column label="备注" align="center" prop="history_remark"/>
        <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
        <!--        <template slot-scope="scope">-->
        <!--          <el-button type="success" @click="addDept(scope.row)">选择</el-button>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="historyQuery.pageNum"
        :limit.sync="historyQuery.pageSize"
        @pagination="gethistoryList"
      />
    </el-dialog>


    <!--  添加检查处方-->
    <el-dialog title="病例展示" :visible.sync="check_prescribe">
      <div slot="title">
        <h1 align="center" style="color: darkblue">添加【检查】处方</h1>
      </div>
      <span style="float: left"><el-button type="success" icon="el-icon-plus" @click.native="addCheck()">确认添加</el-button></span>
<!--      <span style="float: right">检查处方金额¥</span>-->
      <el-table :data="multipleSelection1">
        <el-table-column label="序号" align="center" prop="projectId"/>
        <el-table-column label="项目名称" align="center" prop="projectName"/>
        <el-table-column label="单位" align="center" prop="projectTime"/>
        <el-table-column label="单价(元)" align="center" prop="projectUnitPrice"/>
        <el-table-column label="金额(元)" align="center" prop="projectUnitPrice"/>
        <el-table-column label="检查备注" align="center" prop="remark"/>
<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="success" @click="addDept(scope.row)">选择</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <div align="center">
        <el-button type="primary" icon="el-icon-plus" @click="openCheckChu">添加检查项</el-button>
      </div>
    </el-dialog>


    <!--  添加药用处方-->
    <el-dialog title="病例展示" :visible.sync="medicine_prescribe">
      <div slot="title">
        <h1 align="center" style="color: darkblue">添加【药用】处方</h1>
      </div>
      <span style="float: left"><el-button type="success" icon="el-icon-plus" @click.native="addDrugs()">确认添加</el-button></span>
<!--      <span style="float: right">药用处方金额{{this.houseTotal}}¥</span>-->
      <el-table :data="multipleSelection">
        <el-table-column label="序号" align="center" prop="drugId"  v-model="multipleSelection.drugId"/>
        <el-table-column label="药品名称" align="center" prop="drugName"/>
        <el-table-column label="药品数量" align="center"  prop="drugNum" v-model="multipleSelection.drugNum">
          <template slot-scope="scope">
              <el-input-number v-model.number="scope.row.drugNum" @change="changeNum(scope.row)" size="small"
                             style="width: 122px" :min="1"   :step="1"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="单价(元)" align="center" prop="drugRpPrice"/>
        <el-table-column
          label="金额"
        align="center"
        prop="this.houseTotal"
        :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.houseTotal = scope.row.drugRpPrice && scope.row.drugNum ? scope.row.drugRpPrice * scope.row.drugNum : 0}}
          </template>
        </el-table-column>
        <el-table-column label="复用备注" align="center" prop="remark"/>
<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="success" @click="addDept(scope.row)">删除</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <div align="center">
        <el-button type="primary" icon="el-icon-plus" @click="openMedcineChu">添加药用处方项</el-button>
      </div>
    </el-dialog>


    <!--======================================================抽屉======================================================================-->
    <!--  药用抽屉-->
    <el-drawer
      title="我是标题"
      :visible.sync="medicine_drawer"
      :direction="direction">
      <div slot="title"><h1 align="center" style="font-family: 黑体">药品列表</h1></div>
      <el-form :model="DrugqueryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="关键字" prop="postCode">
          <el-input
            v-model="DrugqueryParams.postCode"
            placeholder="请输入关键字"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryMedicine">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryMedicine">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="Medicine_List"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="drugId"
          label="药品ID"
          width="120">
          <!--        <template slot-scope="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column
          prop="drugName"
          label="药品名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="drugStock"
          label="库存量"
        >
        </el-table-column>
        <el-table-column
          prop="drugUnit"
          label="单位"
        >
        </el-table-column>
        <el-table-column
          prop="drugMatrixing"
          label="换算量"
        >
        </el-table-column>
      </el-table>

    </el-drawer>

    <!--  检查抽屉-->
    <el-drawer
      title="我是标题"
      :visible.sync="check_drawer"
      :direction="direction">
      <div slot="title"><h1 align="center" style="font-family: 黑体">检查列表</h1></div>
      <el-form :model="CheckqueryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="关键字" prop="postCode">
          <el-input
            v-model="CheckqueryParams.postCode"
            placeholder="请输入关键字"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryCheck">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryCheck">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="Check_List"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="projectId"
          label="项目ID"
          width="120">
          <!--        <template slot-scope="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="keyword"
          label="关键字"
        >
        </el-table-column>
        <el-table-column
          prop="projectUnitPrice"
          label="项目单价"
        >
        </el-table-column>
        <el-table-column
          prop="projectTime"
          label="单位"
        >
        </el-table-column>

      </el-table>

    </el-drawer>


  </div>
</template>

<script>

import {getPatients, findPatient, gethistory, addCase, getDrug,queryCheckName,addCheck,addDrug,succeed} from "@/api/doctor/visits";
import {parseStrEmpty} from "@/utils/ruoyi";

export default {
  name: "index",
  data() {
    return {
      houseTotal:0,
      labelPosition: 'left',//表单位置

      dialog: false,//挂号单展示标志符

      historyill: false,

      seePatient1: '待就诊列表',//挂号者首选项
      seePatient2: '患者档案',//挂号者首选项
      seePatient3: '病例',//挂号者首选项

      PatientData: {},//待就诊列表

      PatientData2: {},//就诊中列表

      PatientData3: {},//就诊完成列表

      patientData: {},//患者个人信息

      historyList: {},//历史病例表

      total: 0,//总页数

      loading: true,//加载罩

      stretch: true,//是否伸展标签页

      Medicine_List: {},//药用表

      Check_List: {},//检查项目表

      //表单数据
      form: {},

      //添加药品数组
      drugList:{
        drug:[],
        num:[],
      },

      // 显示搜索条件
      showSearch: true,

      historyQuery: {
        pageNum: 1,
        pageSize: 10

      },//历史病例查询参数

      check_prescribe: false,//检查处方标志符
      check_prescribeList: {},//检查处方集合
      medicine_prescribe: false,//药用处方标志符
      medicine_prescribeList: {},//药用处方集合

      direction: 'rtl',//抽屉方向
      medicine_drawer: false,//药用抽屉
      check_drawer: false,//检查抽屉
      DrugqueryParams: {},//药品条件搜索
      CheckqueryParams: {},//检查条件搜索

      //病例参数
      currentcase: {
        historyNumber: undefined, //病例编号
        historyType: undefined,//接诊类型（0,初诊,1复诊）
        historyDiscribe: undefined,//病人描述
        historyDate: undefined,//发病日期
        historyDiagnosis: undefined,//诊断信息
        historyContagion: undefined,//是否是传染病(0,不传染,1传染)
        historyProposal: undefined,//医生建议
        historyRemark: undefined,//医生加的备注
        historyPatientId: undefined,//患者id
      },//新增病例数据1

      caseid: '',//添加后的病例id
      registerid: '',//挂号单id
      patientName: '',//患者姓名
      patientId: '',//患者id
      multipleSelection:[],
      multipleSelection1:[], //选中框获取数据

    }
  },
  methods: {
    /*changeNum(data){
      console.log(data)
      var list = [];
      var nums = [];
      for(var i = 0;i < this.data.length;i++){
        var str = data[i].drugId;
        var num = data[i].drugNum;
        list.push(str)
        list.push(num)
      }
      //console.log(this.patientId) //患者id
      console.log(list)
      console.log(nums)
    },*/
    //添加处方检查
    addCheck(){
      console.log(this.multipleSelection1)
      var list = [];
      for(var i = 0;i < this.multipleSelection1.length;i++){
        var str = this.multipleSelection1[i].projectId;
        list.push(str)
      }
      console.log(this.patientId)
      console.log(list)
      addCheck(list,this.patientId).then(ser =>{
        if(ser == 1){
          this.check_prescribe = false;
          this.$modal.msgSuccess("添加成功");
        }else {
          this.$modal.msgSuccess("添加失败");
        }
      })
    },

    succeed(){
      console.log(this.patientId)
      succeed(this.patientId).then(res => {
        if(res != 0){
          this.$modal.msgSuccess("就诊完成");
        }else {
          this.$modal.msgSuccess("就诊失败");
        }
      })
    },

    //添加药品
    addDrugs(){
      console.log(this.patientId)
      console.log(this.multipleSelection)
      var num = [];
      var drug = [];
      for (var i = 0;i<this.multipleSelection.length;i++){
        num.push(this.multipleSelection[i].drugNum)
        drug.push(this.multipleSelection[i].drugId)
      }
      console.log(num)
      console.log(drug)
      this.drugList.drug = drug
      this.drugList.num = num
      addDrug(drug,num,this.patientId).then(src =>{
        if(src == 1){
          this.medicine_prescribe = false;
          this.$modal.msgSuccess("添加成功");
        }else {
          this.$modal.msgSuccess("添加失败");
        }
      })

    },


    handleClick(tab, event) {
      if (tab.name === '历史病例') {
        this.gethistoryList();
        this.historyill = true;
      }
    },
    //选中框获取数据
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
  },

    //选中框获取数据
    handleSelectionChange1(val) {
      console.log(val)
      this.multipleSelection1 = val
    },
    //获得历史病例函数
    gethistoryList() {

      gethistory(this.historyQuery).then(res => {
        // console.log(res);
        this.loading = true;
        this.historyList = res.rows;
        this.total = res.total;
        this.loading = false;

      })
    },


    opendialog() {
      this.caseid = '保存病例后显示'
      this.dialog = true;
      getPatients().then(res => {
        console.log(res.rows)
        this.PatientData = res.rows;
      })
      getRegister(2).then(res => {
        this.PatientData2 = res;
      })
      getRegister(3).then(res => {
        this.PatientData3 = res;
      })

    },

    //用户数据回显
    putPatient(patientId) {
      console.log(patientId)
      findPatient(patientId).then(res => {
        console.log(res)
        this.patientData = res.data;
        //this.historyQuery.history_patient_id=res.id;//病例查询id加载
        this.registerid = res.data.regisTracking; //挂号id
        this.patientName = res.data.patientName;//患者姓名赋值
        this.patientId = res.data.patientId; //患者id
        this.patientName = this.patientName + '的病例展示';
        this.dialog = false;
        this.remind("患者数据加载成功");
      })
    },

    //提示框
    remind(msg) {

      this.$message({
        message: msg,
        type: 'success'
      });

    },


    //保存病例
    saveCase() {
      console.log(this.form, this.patientId)
      addCase(this.form, this.patientId).then(res => {
        console.log(this.form, this.patientId)
        console.log(res.data)
        this.caseid = res;
        this.remind("添加病例成功");
      })
    },


    //打开检查处方
    openPrescribe() {
      this.check_prescribe = true;
    },

    //打开药用处方
    openMecinePrecribe() {

      this.medicine_prescribe = true;

    },


    //打开药用抽屉
    openMedcineChu() {
      this.medicine_drawer = true;
      getDrug().then(src => {
        console.log(src)
        this.Medicine_List = src.rows
      })

    },

    openCheckChu() {
      this.check_drawer = true;
      queryCheckName().then(src => {
        console.log(src)
        this.Check_List = src.rows
      })

    },

    //药品条件搜索
    handleQueryMedicine() {


    },

    /** 药品重置按钮操作 */
    resetQueryMedicine() {
      this.resetForm("queryForm");
      this.handleQueryMedicine();
    },


    //检查条件搜索
    handleQueryCheck() {


    },

    /** 检查重置按钮操作 */
    resetQueryCheck() {
      this.resetForm("queryForm");
      this.handleQueryMedicine();
    },
  }
}
</script>

<style scoped>
.el-tab {

  /*width: 400px;*/
  /*text-align: center;*/

}

#butDiv {

  float: right;
  /*position: absolute;*/
  /*top: 10px;*/


}

</style>
